<!-- 我的金币 -->
<template>
	<view class="page">
		<view class="imgs flex justify-between">
			<view class="line">

			</view>
			<view class="bcimg">
				<view class="board">
					<view class="count flex align-center flex-column">
						<view class="num">
							{{item.goldNum}}
						</view>
						<view class="name">
							行动力积分
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title flex justify-center align-center">
				积分攻略
			</view>
			<view class="list">
				<!-- <view class="item flex justify-between align-center" v-for="item in list" :key="item.id">
					<view class="left flex justify-between flex-column">
						<view class="top flex align-center">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/icon.png" mode="">
							</image>
							<view class="titles" :class="item.status == 1? 'active0': ''">
								{{item.title}}
							</view>
							<view class="num">
								{{item.num}}
							</view>
						</view>
						<view class="bottom" :class="item.status == 1? 'active1': ''">
							{{item.content}}
						</view>
					</view>
					<view class="right flex-shrink flex justify-center align-center"
						:class="item.status == 1? 'active2': ''">
						{{item.status == 1 ? '已完成' : item.button}}
					</view>
				</view> -->
				邀请新用户，新用户通过分享链接登陆注册“山富职得”小程序，即可获得积分，每新邀请一个用户，即可得10个积分积分可在下方兑换相应商品哦~~~
			</view>
		</view>
		<view class="coins flex justify-center align-center"
			:style="{'margin-top': `calc(${contentHeight}px - 111rpx + 50rpx)`}">
			积分兑换
		</view>
		<view class="swiper">
			<swiper style="height: 884rpx;" circular autoplay interval="3000">
				<swiper-item v-for="(items,index) in list" :key="index">
					<coinsList :items="items" @exchange="buy"></coinsList>
				</swiper-item>
			</swiper>
		</view>
		<view class="form" v-show="show">
			<u-form  class="contents" :model="form" ref="uForm" >
				<view class="txt">请填写信息</view>
				<u-form-item label="收货地址" label-width="144" prop="addressAreas">
					<u-input v-model="form.addressAreas" type="select" @click="show0 = true"/>
				</u-form-item>
				<u-form-item label="详细地址" label-width="144"prop="address"><u-input v-model="form.address" placeholder="请输入您的详细地址"/></u-form-item>
				<u-form-item label="手机号" label-width="144" prop="phone"><u-input v-model="form.phone" placeholder="请输入您的手机号码"/></u-form-item>
				<u-form-item label="姓名" label-width="144" prop="username"><u-input v-model="form.username" placeholder="请输入您的姓名"/></u-form-item>
				<view class="btn">
					<view class="btn0 flex justify-center align-center" @click="cancel" type="error">取消</view>	
					<view class="btn1 flex justify-center align-center" @click="submit" type="primary">提交</view>
				</view>	
			</u-form>
		</view>
		<u-picker confirm-color="#0265EB" v-model="show0" mode="region" :default-region='code' @confirm="setCity"></u-picker>
		<view class="toastbg" v-show="show"></view>
	</view>
</template>

<script>
	import coinsList from '@/components/coinsList/coinsList.vue'
	export default {
		components: {
			coinsList
		},
		data() {
			return {
				show0:false,
				list:[],
				contentHeight: 0,
				item:{},
				form:{
					username:'',
					phone:'',
					province:'',
					city:'',
					area:'',
					address:'',
					exchangeCommodityId:'',
					goldNum:'',
					addressAreas:''
				},
				code: ["北京市","市辖区","东城区"],
				show:false,
				rules:{
					addressAreas: [{
						required: true,
						message: '请选择收货地址',
						trigger: ['blur', 'change']
					}],
					address:[
						{
							required: true,
							message: '请输入详细地址',
							trigger:['blur','change']
						}
					],
					username:[
						{
							required: true,
							message: '请输入姓名',
							trigger:['blur','change']
						}
					],
					phone: [
							{
								required: true, 
								message: '请输入手机号',
								trigger: ['change','blur'],
							},
							{
								// 自定义验证函数，见上说明
								validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// this.$u.test.mobile()就是返回true或者false的
									return this.$u.test.mobile(value);
								},
								message: '手机号码不正确',
								// 触发器可以同时用blur和change
								trigger: ['change','blur'],
							}
						]
				}
				
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			//初始化
			init() {
				this._getContentHeight()
				this.getData()
			},
			async submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.$post('/exchangeLog/exchangeGoods',that.form).then((res)=>{
							if(res.code == 200){
								that.show = false
								that.getData()
								if(res.data != 1){
									uni.showToast({ title: '积分不足', icon: 'none' });
								}else{
									uni.showToast({ title: '兑换成功', icon: 'success' });
								}
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			//获取金币攻略区域的高
			_getContentHeight() {
				uni.createSelectorQuery().select('.content').boundingClientRect(item => {
					this.contentHeight = item.height
				}).exec()
			},
			setCity(e){
				console.log(e)
				this.form.addressAreas = e.province.label + e.city.label + e.area.label
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.area = e.area.label
			},
			async getData(){
				let {data: item} = await this.$get('/exchangeLog/detail')
				this.item = item
				console.log(item)
				for(let i=0;i<item.exchangeCommodityList.length;i+=4){
					this.list.push(item.exchangeCommodityList.slice(i,i+4))
				}
			},
			buy(e){
				console.log(e) //点击按钮的id
				this.show = true
				this.form.exchangeCommodityId = e.exchangeCommodityId
				this.form.goldNum = e.goldNum
			},
			cancel(){
				this.show = false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.page {
		background: linear-gradient(135deg, #FFA516 30%, #DA4300);
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		// u-picker{
		// 	width: 100%;
		// 	position: fixed;
		// 	bottom: 0;
		// 	z-index: 100;
		// 	height: 400rpx;
		// }
		.imgs {
			.line {
				width: 50rpx;
				height: 465rpx;
			}

			.bcimg {
				width: 700rpx;
				height: 465rpx;
				left: 50rpx;
				background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/bcbc.png');
				background-repeat: no-repeat;
				background-size: cover;

				.board {
					width: 539rpx;
					height: 310rpx;
					margin-left: 65rpx;
					background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/board.png');
					background-repeat: no-repeat;
					background-size: cover;
					padding-top: 147rpx;

					.count {
						.num {
							font-weight: bold;
							color: #FFA516;
							font-size: 52rpx;
							line-height: 1;
						}

						.name {
							font-weight: 500;
							color: #FFA516;
							font-size: 32rpx;
							margin-top: 25rpx;
							line-height: 1;
						}
					}
				}
			}
		}

		.content {
			position: absolute;
			left: 30rpx;
			top: 354rpx;
			width: 690rpx;
			padding: 50rpx 30rpx 10rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.title {
				margin-bottom: 30rpx;
				font-weight: bold;
				color: #FF7916;
				font-size: 36rpx;
			}

			.list {
				margin-bottom: 40rpx;
				padding: 10rpx;
				color: #999999;
				.item {
					margin-bottom: 40rpx;
					
					.left {
						.top {
							margin-bottom: 20rpx;

							image {
								width: 27rpx;
								height: 27rpx;
							}

							.titles {
								font-weight: bold;
								color: #191919;
								font-size: 32rpx;
								margin: 0 20rpx;
							}

							.active0 {
								color: #999999;
							}

							.num {
								font-weight: 500;
								color: #FF7916;
								font-size: 24rpx;
							}
						}

						.bottom {
							font-weight: 400;
							color: #666666;
							font-size: 24rpx;
							line-height: 36rpx;
						}

						.active1 {
							color: #B6B6B6;
						}
					}

					.right {
						width: 116rpx;
						height: 51rpx;
						background: linear-gradient(135deg, #FFA516, #F85800);
						font-size: 24rpx;
						color: #FFFFFF;
						border-radius: 50rpx;
						margin-left: 35rpx;
					}

					.active2 {
						background: #F3F3F3;
						color: #999999;
					}
				}
			}
		}

		.coins {
			font-weight: bold;
			color: #FFFFFF;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}

		.swiper {
			padding: 0 30rpx;
		}
		.form {
			
			.txt{
				display: flex;
				justify-content: center;
				padding-bottom: 30rpx;
				color: #625D5D;
			}
			width: 690rpx;
			padding-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			border-radius: 24rpx;
			position: fixed;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: #ffffff;
			z-index: 99;
			.contents{
				.btn{
					padding-top: 20rpx;
					display: flex;
					justify-content: center;
					.btn0{
						width: 300rpx;
						height: 75rpx;
						background: #999999;
						border-radius: 38rpx;
						line-height: 1;
						font-weight: 500;
						color: #FFFFFF;
						font-size: 32rpx;
						box-shadow: 0rpx 10rpx 10rpx rgba(153, 153, 153, 0.4);
						margin-right: 40rpx;
					}
					.btn1{
						width: 300rpx;
						height: 75rpx;
						background: #0265EB;
						border-radius: 38rpx;
						line-height: 1;
						font-weight: 500;
						color: #FFFFFF;
						font-size: 32rpx;
						box-shadow: 0rpx 10rpx 10rpx rgba(12,108,240, .4);
					}
				}
			}
				
			
		}
		.toastbg {
			opacity: 0.2;
			background-color: black;
			position: fixed;
			top: 0;
			bottom: 0;
			width: 100%;
			min-height: 100%;
		}
		
	}
</style>
